﻿/* *********************************
 @ 作者 : LakNeumann
 @ 最后修改时间: 2017-04-11
 @ 版本: 1.0
 ********************************* */

/* 
* 生成图片容器
* @param {string} path 图片所在的路径, 用于预览和生成到 input 上
*/
var _html = (path) =>
    "<div class='pup-image'>" +
        "<img src=" + path + ">" +
        "<div class='pup-remove k-icon k-i-delete'></div>" +
    "</div>";

/* 
* 生成图片待上传容器
* @param {string} id 文件id 用于图片上传完后识别和替换
*/
var _html2 = (id) =>
    "<div id=" + id + " class='pup-image'>" +
        "<div>" +
            "正在上传..." +
        "</div>" +
    "</div>";

$(function () {
    // 根据 input 的初始值来初始化 image-box
    $(".pup-input").each(function (index, ele) {
        var _i = $(this);
        var imgs = _i.val();
        // 如果 input 中有值
        if (imgs.length > 0) {
            // 多个 url 分隔符
            var ar = imgs.split("|");
            var _b = _i.siblings('.pup-image-box');
            // 防止 imagebox 变动引发 DOMSubtreeModified 事件
            // 利用变量先保存值, 然后一次性替换
            var _c = "";
            $.each(ar, function (index, value) {
                _c += _html(value);
            });
            // 一次性替换
            _b.append(_c);
        }
    })

    // 绑定图片移除按钮事件
    $(".pup-image-box").on("click", ".pup-remove", function () {
        var _o = $(this).parent();
        _o.remove();
    })

    // 图片大容器中内容发生变动(添加图片或删除)事件
    // 将大容器中的所有图片路径, 生成到绑定的 input 中
    $(".pup-image-box").on('DOMSubtreeModified', function (e) {
        // pup-image-box 对象
        var $_that = $(this);
        // 找到绑定的 input
        var _i = $_that.siblings(".pup-input");
        var _content = ""
        // 获取容器中所有图片
        $_that.find('img').each(function (index, element) {
            // 多图之间用 | 号来分割
            _content += (index == 0 ? "" : "|") + $(this).attr("src");
        });
        // 图片路径组生成到 input 中
        _i.val(_content).change();
    });
})

/*
* 初始化所有图片上传控件
*/
function initAllUploader() {
    $(".pup-main").each(function (index, element) {
        var obj = $(this);
        // 上传图片的按钮
        var _b = obj.attr("plup-btn");
        // 是否多图上传
        var _m = obj.attr('plup-mutil') != undefined;
        // 实例化
        initUploader(obj, _b, _m);
    })
}

/*
* 将标签实例化为一个图片的上传器
* @param {object} 要实例化的dom对象
* @param {string} 打开文件上传窗口的按钮的Id
* @param {mutil}  是否是多图上传
*/
function initUploader(obj, btn, mutil) {
    obj.pluploadQueue({
        runtimes: 'html5',
        browse_button: btn,
        url: "/File/Uploader",
        // 唯一名命名
        unique_names: true,
        // 是否多图上传
        multi_selection: mutil,
        chunk_size: "0",
        filters: {
            mime_types: [{ title: "Image files", extensions: "jpg,gif,png" }],
            // 是否限制上传重复图片
            prevent_duplicates: false
        },
        // 最大重试次数
        max_retries: 0,
        init: {
            FilesAdded: function (uploader, files) {
                var _b = obj.parent().find('.pup-image-box');
                var _c = "";
                // 给每个文件都预留一个 "正在上传.." 的div
                // 给用户表示文件已经加入到上传队列中
                for (var i in files) {
                    _c += _html2(files[i].id);
                }
                mutil ? _b.append(_c) : _b.html(_c);
                uploader.start();
            },
            FileUploaded: function (uploader, file, responseObject) {
                // 获取响应对象
                response = jQuery.parseJSON(responseObject.response);
                // 文件地址
                var _p = response.path;
                // image 大容器
                //var _b = obj.parent().find('.pup-image-box');
                //// 根据路径生成 图片
                //var _c = _html(_p);
                //// 如果是单图上传, 则使用替换
                //// 如果是多图上传, 则附加在图片容器后面
                //mutil ? _b.append(_c) : _b.html(_c);

                // 将原本文件上传的div替换成实际的图片
                $(".pup-image-box #" + file.id).html(
                    "<img src=" + _p + ">" +
                    "<div class='pup-remove k-icon k-i-delete'></div>"
                );
            },
            UploadComplete: function (uploader, files) {
                $(".plupload_upload_status").hide();
                $(".plupload_buttons").show();
                // 图片传送完成 可以继续上传其他图片
                uploader.disableBrowse(false);
            },
            Error: function (uploader, errObject) {
            },
        },
    });
}